<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="./static/index.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="./static/jap.js"></script>
	<script src="./static/de.js"></script>
	<link rel="stylesheet" href="./index.css">
	<!-- Element plus start -->
	<!-- <script src="https://unpkg.com/vue@next"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script> -->
	<!-- Emeplemt plus end -->
</head>

<body>
	<div id="app">
		<div v-if="!title" style="height: 100vh; width: 1300px;float: left; background-color: #fff; margin: 0 auto;">
		</div>

		<el-button @keydown.enter.native.prevent @keydown.space.native.prevent class="glow-on-hover" type="primary"
			@click="queue(1)">Start</el-button>
		<el-button class="glow-on-hover" @keydown.enter.native.prevent @keydown.space.native.prevent
			@click="this.goKana">kana to haku
		</el-button>
		<el-button class="glow-on-hover" @click="this.showMarked" @keydown.enter.native.prevent
			@keydown.space.native.prevent>
			show marked
		</el-button>

		<el-calendar style="width:800px;float:right;background-color: rgba(255, 255, 255, 0.6);">
			<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
			<template slot="dateCell" slot-scope="{date, data}">
				{{ data.day.split('-').slice(1).join('-') }}
				<div style="float: right;" v-for="(item, index) in checkList" :key="index">
					<div :class="data.day == item ? 'selected' : ''" v-if="data.day == item">✔️</div>
				</div>
			</template>
		</el-calendar>
		<div style="text-align: center; margin: 0 auto">

			<el-dialog :visible.sync="visible">
				<el-dropdown slot="title" trigger="click">
					<span class="el-dropdown-link" style="cursor: pointer;">
						{{title}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="switchBook('jp')">Japanese A1</el-dropdown-item>
						<el-dropdown-item @click.native="switchBook('de')">Deutsch A2</el-dropdown-item>
						<el-dropdown-item divided disabled>English</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

				<!-- execerse -->
				<div class="exe" v-if="exe">

					<el-switch active-text="Reverse Mode" @change="queReverse" inactive-text="Normal Mode"
						style="margin: 10px;" v-model="reverse" active-color="#13ce66" inactive-color="#409EFF">
					</el-switch>
					<div v-if="current==2">
						<el-empty v-if="this.markeds.keys.length==0" description="Empty here"></el-empty>
						<div v-if="this.markeds.keys.length>0">
							<div class="left">
								<div>
									<el-button @keydown.enter.native.prevent @keydown.space.native.prevent
										style="margin: 10px;" @click="show3 = !show3">Show All
									</el-button>

									<div
										:style="'margin-top: 20px; height: 200px; float: left;'+ show3?'width: 50%':'width: 50%'">
										<el-collapse-transition>
											<div v-show="show3">
												<div style="float: left;" v-for="i in this.markeds.keys"
													class="transition-box">{{i}}</div>
											</div>
										</el-collapse-transition>
									</div>
								</div>
							</div>
							<div class="right">
								<p :style="show3?'-webkit-animation:show 0.3s;':'-webkit-animation:hide 0.3s;'">{{map[0]}}</p>
								<p v-if="ans">{{map[1]}}</p>
								<hr>

								<el-button @keydown.enter.native.prevent @keydown.space.native.prevent
									icon="el-icon-video-play" circle type='success' @click="sound(map)">
								</el-button>
								<el-button type="danger" icon="el-icon-remove" circle @keydown.enter.native.prevent
									@keydown.space.native.prevent @click="removeAndQueue(map)"></el-button>
								<el-button @keydown.enter.native.prevent @keydown.space.native.prevent
									icon="el-icon-s-opportunity" circle type='warning' @click="answer()">
								</el-button>
								<el-button @keydown.enter.native.prevent @keydown.space.native.prevent
									icon="el-icon-arrow-right" circle type='primary' style="margin: 10px;"
									@click="queue()">
								</el-button>
							</div>
						</div>
					</div>
					<div v-if="current==1">

						<p :style="(arr.length%2==0)?'-webkit-animation:show 0.5s':'-webkit-animation:hide 0.5s'">
							{{map[0]}}</p>
						<p :style="ans?'-webkit-animation:show 0.3s':'-webkit-animation:hide 0.3s'" v-if="ans">
							{{map[1]}}</p>
						<hr>
						<el-button style="background-color: #fdb933;" @keydown.enter.native.prevent
							@keydown.space.native.prevent icon="el-icon-star-on" type="warning" circle
							@click="mark(map)"></el-button>
						<el-button @keydown.enter.native.prevent @keydown.space.native.prevent
							icon="el-icon-s-opportunity" circle type='warning' @click="answer()">
						</el-button>
						<el-button @keydown.enter.native.prevent @keydown.space.native.prevent
							icon="el-icon-arrow-right" circle type='primary' style="margin: 10px;" @click="queue()">
					</div>

				</div>
				<!-- res -->
				<div v-if="kana">
					<el-alert title="Click card to save!" type="info" show-icon effect="dark">

					</el-alert>
					<el-card class="box-card" style="background-color: aliceblue;">
						<div v-for="e,i in vocas.keys()" :key="e" class="text item">
							<el-alert v-if="e.indexOf('~tab')!=-1" style="width: 100%;float: left;" type="success"
								effect="dark" :closable="false">
								<template slot="title" style="width: 100%;float:left">
									<span>{{vocas.get(e)}}</span>

									<el-switch active-text="hide" @change="removePart(e)" inactive-text="show"
										style="margin: 10px;" v-model="tagedSelectors.includes(e)"
										active-color="#409EFF" inactive-color="#13ce66">
									</el-switch>
								</template>

							</el-alert>
							<div v-else class="card-prev" @mouseover="hover(vocas.get(e))"
								@click="save([e,vocas.get(e)])"
								style="width: 19%;text-align: center;padding-left: 0px;">
								<span v-if="currentEntity=='jp'" class="cspan">{{vocas.get(e)}}</span>
								<span v-if="currentEntity!=='jp'" class="cspan_en">{{vocas.get(e)}}</span>
								<span v-if="currentEntity=='jp'" class="cspan">{{e.split(' ')[0]}}</span>
								<span v-if="currentEntity!=='jp'" class="cspan_en">{{e}}</span>
								<span v-if="currentEntity=='jp'" class="cspan" style="border: none;">{{e.split(' ')[1]}}</span>
							</div>
						</div>
					</el-card>
				</div>
			</el-dialog>
		</div>
	</div>
</body>
<!-- import Vue before Element -->
<script src="./static/vue.js"></script>

<!-- import JavaScript -->
<script src="./static/index.js"></script>

<script src="./index.js"></script>

</html>